html {
  // 设置页面滚动条滚动的行为：缓慢滚动
  scroll-behavior: smooth;
}

.navbar {
  width: 100%;
  margin: 0px;
  border: 0px;
  border-radius: 0;
  background: #111;
  padding: 5px 0px;
  // 粘性定位
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;


  // .navbar .logo
  .logo {
    color: #fff;
    text-transform: uppercase;
    font-family: OSBold;
  }

  .nav li a {
    color: #fff;
    text-transform: uppercase;
    font-family: OSBold;
    transition: all linear .3s;
    border-bottom: 3px solid transparent;

    //& css 选择自己本身
    &:hover {
      border-bottom: 3px solid #fcac45;
    }
  }

  @media screen and (max-width:500px) {
    .nav li a {
      text-align: center;
    }
  }
}

.banner {
  background: #111;
  padding: 15em 0 10em;
  text-align: center;
  color: #c3c3c3;

  .title {
    font-size: 3em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: OSLight;

    span {
      color: #fcac45;
      font-family: OSBold;
    }
  }

  .desc {
    font-size: 1.4em;
    margin-bottom: 16em;

    span {
      font-family: OSBold;
    }
  }

  .more {
    width: 2em;
    height: 2em;
    line-height: 2em;
    font-size: 2.2em;
    border-radius: 100px;
    text-decoration: none;
    color: #c3c3c3;
    border: 2px solid #c3c3c3;
    transition: all linear .3s;
    background: transparent;

    &:hover {
      transform: translateY(-30px) rotate(360deg);
      // box-shadow: 0px 10px 10px 1px #515050;
    }
  }

  // 成立条件 屏幕尺寸 and 条件
  // x <= 500 手机端的条件 最大值 x = 500 换成css话 max-width:500
  @media screen and (max-width:500px) {
    padding: 10em 0 5em;

    .title {
      font-size: 2.5em;
    }

    .desc {
      font-size: 1.2em;
    }

    .more {
      width: 2em;
      height: 2em;
      line-height: 2em;
      font-size: 2em;
    }
  }

}

.about {
  width: 100%;
  background: #fff;
  padding: 8em 0 1em;
  overflow: hidden;

  .container {
    display: flex;

    .left {
      flex-shrink: .8;
    }

    .right {
      width: 45%;

      .subject {
        margin-bottom: 2em;

        .top {
          font-size: 1.5em;
          text-transform: uppercase;
          color: #636363;
          font-family: OSLight;
          margin-bottom: -7px;
        }

        .bottom {
          font-size: 3em;
          text-transform: uppercase;
          color: #000;
          font-family: OSLight;
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;

          span:first-child {
            border-bottom: 5px solid #fcac45;
          }

          span:last-child {
            font-family: OSBold;
          }
        }
      }

      .content {
        color: #878686;
        font-size: 1.3em;
        font-family: OSLight;
        margin-bottom: 1.5em;
      }

      .list {
        margin-bottom: 2em;

        li {
          font-family: OSLtalic;
          font-size: 1.3em;
          color: #878686;
          display: flex;
          margin-bottom: .4em;
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;

          &:last-child {
            margin-bottom: 0px;
          }

          span:first-child {
            color: #5a5a5a;
            margin-top: 3px;
            margin-right: 3px;
          }

          span:last-child {
            font-family: OSBold;
            color: #5a5a5a;
            margin-right: 3px;
          }
        }
      }

      .more {
        width: 50%;
        padding: 1em 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
        border: 1px solid #7f7f7f;
        border-radius: 3px;
        font-size: 1.2em;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #7f7f7f;
        cursor: pointer;
        transition: all linear .3s;

        &:hover {
          transform: translateY(-10px);
          box-shadow: 0px 5px 10px 2px #5a5a5a;
        }

        span:first-child {
          margin-right: 5px;
          color: #000;
        }

        span:last-child {
          margin-top: 3px;
        }
      }
    }
  }

  // 在1000px 以下 最大值：1000px
  @media screen and (max-width:1000px) {
    padding: 5em 0 1em;

    .container {
      width: 95%;

      .left {
        display: none;
      }

      .right {
        width: 100%;
      }
    }
  }

  @media screen and (max-width:500px) {
    .container {
      .right {
        .subject {
          .bottom {
            font-size: 2.5em;
          }
        }

        .list {
          li {
            width: 90%;
          }
        }

        .more {
          width: 60%;
        }
      }
    }

  }


}

.team {
  width: 100%;
  background: #111;
  padding: 5em 0 1em;
  overflow: hidden;
  text-align: center;
  color: #fff;

  .container {
    .subject {
      font-size: 3em;
      background: url('../images/title-background.png') no-repeat bottom center;
      text-transform: uppercase;
      padding-bottom: .8em;
      font-family: OSLight;
      margin-bottom: 2em;

      span {
        font-family: OSBold;
      }
    }

    .list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      margin-bottom: 3em;

      .item {
        width: 23%;
        transition: all linear .3s;

        &:hover {
          transform: translateY(-10px);
        }

        .photo {
          width: 80%;
          border-radius: 100px;
          overflow: hidden;
          margin: 0 auto 1.5em;

          img {
            width: 100%;
          }
        }

        .content {
          .name {
            font-family: OSBold;
            font-size: 1.5em;
          }

          .job {
            margin-bottom: 1em;
          }
        }
      }
    }

    .more {
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        width: 1em;
        height: 1em;
        background: #fff;
        cursor: pointer;
        margin-right: .5em;
        transition: all linear .3s;

        &:hover {
          background: #fcac45;
        }
      }
    }
  }

  @media screen and (max-width:500px) {
    .container {
      width: 95%;

      .subject {
        font-size: 2em;
      }

      .list {
        flex-wrap: wrap;
        margin-bottom: 1em;

        .item {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;

          .photo {
            border-radius: 0px;
          }

          .content {
            text-align: left;
            padding-left: 1em;
          }
        }
      }
    }
  }
}

.service {
  width: 100%;
  background: #ffffff;
  padding: 5em 0 1em;
  overflow: hidden;
  text-align: center;
  color: #222222;

  .container {
    .subject {
      font-size: 3em;
      background: url('../images/title-background.png') no-repeat bottom center;
      text-transform: uppercase;
      padding-bottom: .8em;
      font-family: OSLight;
      margin-bottom: 2em;

      span {
        font-family: OSBold;
      }
    }

    .desc {
      color: #6c6c6c;
      font-size: 1.2em;
      font-family: OSLight;
      margin-bottom: 5em;
      margin-top: 1em;
    }

    .list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      margin-bottom: 3em;

      .item {
        width: 23%;
        transition: all linear .3s;

        &:hover {
          transform: translateY(-10px);
        }

        .photo {
          width: 80%;
          border-radius: 100px;
          overflow: hidden;
          margin: 0 auto 1.5em;

          img {
            width: 100%;
          }
        }

        .content {
          .name {
            font-family: OSBold;
            font-size: 1.5em;
          }

          .desc {
            margin-bottom: 1em;
          }
        }
      }
    }

  }

  @media screen and (max-width:700px) {

    .container {
      width: 95%;

      .subject {
        font-size: 2.8em;
      }

      .desc {
        font-size: 1em;
      }

      .list {
        .item {
          .content {
            .name {
              font-size: 1.2em;
            }

            .desc {
              font-size: .8em;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width:500px) {
    .container {
      width: 95%;

      .subject {
        font-size: 2em;
      }

      .list {
        flex-wrap: wrap;
        margin-bottom: 1em;

        .item {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          margin-top: 1em;

          .photo {
            border-radius: 0px;

            img {
              width: 60%;
            }
          }

          .content {
            text-align: left;
            padding-left: 1em;
          }
        }
      }
    }
  }
}

.client {
  width: 100%;
  background: #111;
  padding: 5em 0 1em;
  overflow: hidden;
  text-align: center;
  color: #fff;
  height: 36em;

  .container {
    .subject {
      font-size: 3em;
      background: url('../images/title-background.png') no-repeat bottom center;
      text-transform: uppercase;
      padding-bottom: .8em;
      font-family: OSLight;
      margin-bottom: 2em;

      span {
        font-family: OSBold;
      }
    }

    .list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      margin-bottom: 10em;
      margin-top: 1em;

      .item {
        width: 23%;
        transition: all linear .3s;

        &:hover {
          transform: translateY(-10px);
        }

        // .photo {
        //   width: 80%;
        //   border-radius: 100px;
        //   overflow: hidden;
        //   margin: 0 auto 1.5em;

        img {
          width: 80%;
        }
      }


    }

    .more {
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        width: 1em;
        height: 1em;
        background: #fff;
        cursor: pointer;
        margin-right: .5em;
        transition: all linear .3s;

        &:hover {
          background: #fcac45;
        }
      }
    }
  }

  @media screen and (max-width:500px) {
    .container {
      width: 95%;

      .subject {
        font-size: 2em;
      }

      .list {
        flex-wrap: wrap;
        margin-bottom: 4em;

        .item {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;

          img {
            width: 40%;
            margin: 0 auto;
            margin-top: 1em;
          }

          .photo {
            border-radius: 0px;
          }

          .content {
            text-align: left;
            padding-left: 1em;
          }
        }
      }

      .more {
        span {
          width: .5em;
          height: .5em;
        }

      }
    }
  }
}



.work {
  width: 100%;
  background: #fff;
  padding: 5em 0 1em;
  overflow: hidden;
  text-align: center;

  .container {
    .subject {
      font-size: 3em;
      background: url('../images/title-background.png') no-repeat bottom center;
      text-transform: uppercase;
      padding-bottom: .8em;
      font-family: OSLight;
      margin-bottom: 1em;

      span {
        font-family: OSBold;
      }
    }

    .desc {
      color: #6c6c6c;
      font-size: 1.2em;
      font-family: OSLight;
      margin-bottom: 5em;
    }

    .box {
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1em;

        .left {
          font-family: OSBold;
          font-size: 1.2em;
          text-transform: uppercase;
        }

        .right {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          flex-wrap: nowrap;

          a {
            font-size: 1.2em;
            color: #6c6c6c;
            border-right: 1px solid #6c6c6c;
            padding: 0 1em;
            transition: all linear .3s;

            &:hover {
              text-shadow: 0px 0px 10px #6c6c6c;
            }

            &:last-child {
              border-right: 0px;
            }
          }
        }

        .option {
          display: none;
        }
      }

      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        .item {
          width: 23%;
          position: relative;
          margin-bottom: 1em;
          overflow: hidden;

          &:hover .mask {
            top: 0;
            opacity: 1;
          }

          img {
            width: 100%;
          }

          .mask {
            position: absolute;
            left: 0;
            top: -100%;
            width: 100%;
            height: 100%;
            background: #222222;
            color: #fff;
            padding-top: 3em;
            transition: all linear .3s;
            opacity: 0;

            .title {
              font-size: 1.2em;
              font-family: OSBold;
              text-transform: uppercase;
              margin-bottom: .5em;
            }

            .short {
              font-size: 1em;
              color: #9e9e9e;
              margin-bottom: 4em;
            }

            .btns {
              width: 2em;
              height: 2em;
              line-height: 1.8em;
              text-align: center;
              font-size: 1.5em;
              color: #fcac45;
              border: 2px solid #fcac45;
              transition: all linear .3s;
              margin: 0 auto;
              border-radius: 100px;

              &:hover {
                transform: translateY(-10px);
                box-shadow: 0px 10px 10px 1px #000;
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width:550px) {
    .container {
      width: 95%;

      .subject {
        font-size: 2em;
      }

      .box {
        .top {
          .right {
            display: none;
          }

          .option {
            display: inline-block;
          }
        }

        .list {
          .item {
            width: 48%;
          }
        }
      }
    }
  }

  @media screen and (max-width:450px) {
    .container {
      .box {
        .list {
          .item {
            width: 100%;

            .mask {
              .title {
                font-size: 1.8em;
              }

              .short {
                font-size: 1.4em;
              }
            }
          }
        }
      }
    }
  }
}

.testimonials {
  width: 100%;
  background: #111;
  padding: 5em 0 1em;
  overflow: hidden;
  text-align: center;
  color: #fff;
  height: 36em;

  .container {
    .subject {
      font-size: 3em;
      background: url('../images/title-background.png') no-repeat bottom center;
      text-transform: uppercase;
      padding-bottom: .8em;
      font-family: OSLight;
      margin-bottom: 2em;

      span {
        font-family: OSBold;
      }
    }

    .desc {
      margin: 0 auto;
      width: 80%;
      margin-bottom: 2em;
      margin-top: 1em;
      text-transform: uppercase;
    }

    .name {
      width: 100%;
      text-align: center;
      color: #b2b2b2;

    }

    .more {
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        width: .5em;
        height: .5em;
        background: #fff;
        cursor: pointer;
        margin-right: .5em;
        transition: all linear .3s;
        margin-top: 4em;

        &:hover {
          background: #fcac45;
        }
      }
    }
  }

  @media screen and (max-width:500px) {
    .container {
      width: 95%;

      .subject {
        font-size: 2em;
      }

      .desc {
        width: 70%;
        font-size: .7em;
      }

      .more {
        span {
          width: .5em;
          height: .5em;
        }

      }
    }
  }
}



.contact {
  width: 100%;
  background: #fff;
  padding: 5em 0 1em;
  overflow: hidden;
  text-align: center;

  .container {
    .subject {
      font-size: 3em;
      background: url('../images/title-background.png') no-repeat bottom center;
      text-transform: uppercase;
      padding-bottom: .8em;
      font-family: OSLight;
      margin-bottom: 1em;

      span {
        font-family: OSBold;
      }
    }

    .desc {
      color: #6c6c6c;
      font-size: 1.2em;
      font-family: OSLight;
      margin-bottom: 5em;
    }

    .box {
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1em;

        .item {
          width: 49%;
          text-align: left;

          div {
            font-size: 1.2em;
            font-family: OSLight;
            margin-bottom: .4em;

            sup {
              color: red;
            }
          }

          input {
            display: block;
            width: 100%;
            height: 2em;
            line-height: 2em;
            font-size: 1.2em;
            border: 1px solid #6c6c6c;
          }
        }
      }

      .content {
        width: 100%;
        text-align: left;
        margin-bottom: 1em;

        div {
          font-size: 1.2em;
          font-family: OSLight;
          margin-bottom: .4em;

          sup {
            color: red;
          }
        }

        textarea {
          display: block;
          width: 100%;
        }

      }

      .action {
        width: 100%;
        text-align: right;

        .send {
          width: 10em;
          height: 2.2em;
          line-height: 2.2em;
          background: #fcac45;
          text-align: center;
          font-family: OSBold;
          font-size: 1.2em;
          font-weight: bold;
          text-transform: uppercase;
          color: #fff;
          border: 0px;
          transition: all linear .3s;

          &:hover {
            transform: translateY(-10px);
            box-shadow: 0px 10px 10px 2px #6c6c6c;
          }
        }
      }
    }
  }

  @media screen and (max-width:500px) {
    .container {
      width: 95%;

      .subject {
        font-size: 2em;
      }

      .box {
        .top {
          flex-wrap: wrap;

          .item {
            width: 100%;
            margin-bottom: 1em;
          }
        }

        .action {
          text-align: center;
        }
      }
    }
  }
}

.footer {
  width: 100%;
  background: #111;
  padding: 3em 0;
  overflow: hidden;
  color: #fff;

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &::before,
    &::after {
      content: '';
      display: none;
    }

    p {
      font-size: 1.2em;
      font-family: OSLight;
      letter-spacing: 1px;

      span {
        font-family: OSBold;
      }
    }

    .list {
      width: 28%;
      display: flex;
      justify-content: space-around;

      a {
        flex-shrink: 0;
        width: 3.5em;
        height: 3.5em;
        border: 3px solid #6c6c6c;
        border-radius: 100px;
        overflow: hidden;
        transition: all linear .3s;

        &:hover {
          transform: translateY(-20px) rotate(360deg);

        }

        img {
          width: 100%;
        }
      }

    }


  }

  @media screen and (max-width:900px) {
    .container {
      width: 100%;
      flex-wrap: wrap;

      .copyright {
        width: 100%;
        margin-bottom: 2em;
        text-align: center;
      }

      .list {
        width: 100%;
      }


    }
  }
}

.backup {
  width: 70px;
  height: 70px;
  position: fixed;
  right: 45px;
  bottom: 45px;

  a {
    width: 100%;
    height: 100%;

    &:hover {
      animation: up 1s;
    }
  }

  // 动画组
  // 1s = 100% 0% 10% 20% 30% 100%(完成时动画效果)
  @keyframes up {
    0% {
      // transform: scale3d(x, y, z);
      // 0 - 0.9 缩小 《 1 》 1.1 放大
      transform: scale3d(1, 1, 1);
    }

    30% {
      transform: scale3d(1.25, 0.75, 1);
    }

    40% {
      transform: scale3d(0.75, 1.25, 1);
    }

    50% {
      transform: scale3d(1.15, 0.85, 1);
    }

    65% {
      transform: scale3d(.95, 1.05, 1);
    }

    75% {
      transform: scale3d(1.05, .95, 1);
    }

    100% {
      transform: scale3d(1, 1, 1);
    }
  }
}